@charset "utf-8";

@function r($px){
    @return ($px/40) * 1rem;
}
@function px($px){
    @return ($px/2) * 1px;
}  

*{
    margin:0;
    padding: 0;
}
#web{
        margin: 0 auto;
    min-width: 320px;
    max-width: 480px;
}
#pageload{
//  display: none;
    width: 100%;
    height: 100%;
    position: relative;
    background:#4f4f4f; 
    div{
        font-size: 0;
    }
    .star{
        width: 100%;
        height: 100%;
        img{
        width: 100%;
        height: 100%;
        }
    }
    .protagonist{
        text-align: center;
        position: absolute;
        top:px(140);
        img{
            width: 90%;
        }
    }
    .earth{
        text-align: right;
        position: absolute;
        bottom: 0;
        img{
           width: 70%; 
        }
    }
    .please{
        transform: scale(0);
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 1%;
        animation: da 0.8s linear forwards;
        img{
            width:35%;
        }
    }
    .arrow{
        width: 100%;
        position: absolute;
        bottom: px(230);
        text-align: center;
        img{
            width: 18%;
        }
    }
    .progresstext{
        position: absolute;
        color: white;
        bottom: px(155);
        font-size: 16px;
        left: px(12);
        
    }
    
}
#pageStart{
//  display: none;
    overflow: hidden;
    position: relative;
    height: 100%;
    .light{
        width: 0;
        height: 0;
        border-top: px(90) solid transparent;
        border-bottom: px(90) solid transparent;       
        border-left:px(800) solid #555;
        border-right: px(800) solid #555;
        position: absolute;
        top: -999px;
        bottom: -999px;
        left: -999px;
        right: -999px;
        margin: auto;
        transform-origin: center;
    }
    .lg1{
        transform: rotate(0deg);
        animation: l1 4s linear infinite;
    }
    .lg2{
        transform: rotate(30deg);
        animation: l2 4s linear infinite;
    }
    .lg3{
        transform: rotate(60deg);
        animation: l3 4s linear infinite;
    }
    .lg4{
        transform: rotate(90deg);
        animation: l4 4s linear infinite;
    }
    .lg5{
        transform: rotate(120deg);
        animation: l5 4s linear infinite;
    }
    .lg6{
        transform: rotate(150deg);
        animation: l6 4s linear infinite;
    }
    .logo{
        position: absolute;
        right: 0;
        top: 0;
        padding: px(18);
        img{
            width: px(270);
        }
    }
    .title{
        text-align: center;
        position: absolute;
        top: px(125);
        img{
            width: 93%; 
        }
    }
    .mouth{
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        animation: mouth 1s ease infinite;
        img{
            width: 85%;
        }
    }
    .manLeft{
        text-align: left;
        position: absolute;
        bottom: px(160);
        left: px(15);
        img{
            width: 51%;
        }
    }
    .manRight{
        text-align: right;
        position: absolute;
        bottom: px(120);
        right: px(15);
        img{
            width: 51%;
        }
    }
    .start{
        width: 100%;
        position: absolute;
        text-align: center;
        bottom: px(30);
        animation: kaishi 1s ease infinite;
        img{
            width: px(390);
        } 
    }
    .wenhao1{
        position: absolute;
        bottom: px(300);
        left: px(20);
        animation: what 1s ease infinite ;
        img{
            width: 50%;
        }
    }
    .wenhao2{
        height: 100%;
        position: relative;
        img{
            position: absolute; 
          width: px(50);  
        }
        .w1{
           bottom: px(450);
           right: px(25);
        }
        .w2{
           bottom: px(430);
           right: px(310);
        }
        .w3{
           bottom: px(350);
           right: px(25);
        }
        .w4{
           bottom: px(330);
           right: px(320);
        }
    }
    .whatSong{
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 5%;
        img{
            width:px(240);
        }
    }
    
}

#laoge{
    
    position: relative;
    height: 100%;
    .laoge_bg{
        position: absolute;
        height: 100%;
        img{
            width:px(750);
            height: 100%;
        }
        
    }
    .light{
        position: absolute;
        
    }
    .oldman{
        width: 100%;
        text-align: center;
        position: absolute;
        top: px(75);
        img{
            width: px(580);
        }
    }
}
























@keyframes l1{
    0%{
       transform: rotate(0deg); 
    }
    100%{
        transform: rotate(360deg);
    }
}@keyframes l2{
    0%{
        transform: rotate(30deg);
    }
    100%{
        transform: rotate(390deg);
    }
}
@keyframes l3{
    0%{
        transform: rotate(60deg);
    }
    100%{
        transform: rotate(420deg);
    }
}
@keyframes l4{
    0%{
        transform: rotate(90deg);
    }
    100%{
        transform: rotate(450deg);
    }
}
@keyframes l5{
    0%{
        transform: rotate(120deg);
    }
    100%{
        transform: rotate(480deg);
    }
}
@keyframes l6{
    0%{
        transform: rotate(150deg);
    }
    100%{
        transform: rotate(510deg);
    }
}

@keyframes da{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }   
}
@keyframes mouth{
    0%{
        transform: scale(1) translateY(-50%);
    }
    50%{
        transform:scale(1.05) translateY(-50%);
    }
    100%{
        transform:scale(1) translateY(-50%);
    }
}
@keyframes what{
    0%{
            transform: rotateZ(2deg)
    }
    50%{
            transform: rotateZ(-2deg)
    }
    100%{
            transform: rotateZ(2deg)
    }
}
@keyframes kaishi{
    0%, 100% {
    transform: scale3d(1,1,1);
}
10%, 20% {
    transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
}
30%, 50%, 70%, 90% {
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
}
40%, 60%, 80% {
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    }
}
